<template>
	<view class="assit-contain">
		<view class="tabs-list">
			<view class="tabs-box">
				<view class="tabs-item" v-for="(item,index) in tabsType" :key="item.name" @click="activeName=index"
					:class="{'active-tab':activeName==index,'active-right':activeName==index+1,'active-left':activeName==index-1}">
					{{item.name}}
				</view>
			</view>
			<view class="tab-content">
				<view class="tab-1" v-show="activeName==0">
					<view class="left-tab1">
						<span class="user-tab">您好,用户123</span>
						<span class="text-tab">请描述疾病症状</span>
						<button class="bth-tab" @click="tochatAny">免费咨询<image src="@/static/icon/voice.png" alt="" mode="aspectFill">
						</button>
					</view>
					<image class="connect-img" src="@/static/wei.png" mode="widthFix"></image>
				</view>
				<view class="tab-2" v-show="activeName==1">
					<view class="tabitem bgimg1"  @click="navigatorTo(0)">
						<view class="name-tip">
							<span class="name1">就医陪诊</span>
							<span class="name2">快速匹配</span>
						</view>
						<image class="log-peizhen" src="@/static/icon/peizhen4.png" mode="scaleToFill"></image>
					</view>
					<view class="tabitem bgimg2" @click="navigatorTo(1)">
						<view class="name-tip">
							<span class="name1">预约检查</span>
							<span class="name2">精准查找</span>
						</view>
						<image class="log-peizhen" src="@/static/icon/peizhen5.png" mode="scaleToFill"></image>
					</view>
				</view>
				<view class="tab-2" v-show="activeName==2">
					<view class="tabitem bgimg1">
						<view class="name-tip">
							<span class="name1">取送结果</span>
							<span class="name2">随时取送</span>
						</view>
						<image class="log-peizhen" src="@/static/icon/peizhen4.png" mode="scaleToFill"></image>
					</view>
					<view class="tabitem bgimg2">
						<view class="name-tip">
							<span class="name1">出入院办理</span>
							<span class="name2">快速办理</span>
						</view>
						<image class="log-peizhen" src="@/static/icon/peizhen5.png" mode="scaleToFill"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="activeName1" v-show="activeName==0">
			<view class="chating">
				<view class="chating-tips">
					<image src="@/static/icon/chat.png" mode="scaleToFill"></image>
					<view class="chating-nums">
						您有<span class="chating-num">{{unreadNumber}}</span>条消息未回复
					</view>
				</view>
				<view class="chating-msg" v-if="tokenList.length>0" @click="toChat(tokenList[0])">
<!-- 					<image :src="tokenList[0].headImgUrl" mode="scaleToFill"></image> -->
					<u-avatar :src="tokenList[0].headImgUrl?tokenList[0].headImgUrl:'https://cdn.pixabay.com/photo/2021/07/22/11/25/rabbit-6485072_1280.jpg'" shape="circle" :size="50"></u-avatar>
					<view class="chating-right">
						<view class="chating-name">
							<span>{{tokenList[0].nickName}}</span>
							<span class="chating-time">{{$u.timeFormat(tokenList[0].sendTime, 'mm月dd日 hh:MM:ss')}}</span>
						</view>
						<view class="chating-news">
							{{tokenList[0].messageContent}}
						</view>
					</view>
				</view>
			</view>
			<view class="chatlist">
				<view class="chatlist-more">
					<span class="more-title">历史咨询</span>
					<view class="more-right">
						<span>更多</span>
						<u-icon name="arrow-right-double" color="rgba(51,51,51,0.5)" size="14"></u-icon>
					</view>
				</view>
				<view class="chating-msg" v-for="(item,index) in tokenList" :key="item.userId" :class="index==tokenList.length-1?'chating-noborder':''">
					<u-avatar :src="item.headImgUrl?item.headImgUrl:'https://cdn.pixabay.com/photo/2021/07/22/11/25/rabbit-6485072_1280.jpg'" shape="circle" :size="50"></u-avatar>
					<view class="chating-right">
						<view class="chating-name">
							<span>{{item.nickName}}</span>
							<span class="chating-time">{{$u.timeFormat(item.sendTime, 'mm月dd日 hh:MM:ss')}}</span>
						</view>
						<view class="chating-news">
                               {{item.messageContent}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="activeName2" v-show="activeName==1">
			<span class="activeName-title">就医陪诊</span>
			<view class="active1"  v-for="(item_p,p) in jiuzhengList" :key="item_p.id">
				<view class="active1-top">
					<view class="active1-title">
						<image src="@/static/icon/peizhen6.png" mode="widthFix"></image>
						<span>排队挂号</span>
					</view>
					<view class="active1-msg">
						<image src="@/static/icon/peizhen8.png" mode="widthFix"></image>
						<view class="active1-right">
							<span class="text-1">{{item_p.hospitalName}}</span>
							<span class="text-2">陪诊时间：<span class="text-1">{{item_p.expectClinicTime}}</span></span>
							<span class="text-2">就诊人员：<span class="text-1">{{item_p.clinicUserName}}</span></span>
							<span class="text-2">联系方式：<span class="text-1">{{item_p.clinicUserPhone}}</span></span>
						</view>
					</view>
				</view>
				<view class="active1-more">
					<span>查看更多</span>
					<u-icon name="arrow-right-double" color="rgba(51,51,51,0.5)" size="14"></u-icon>
				</view>
			</view>
			<span class="activeName-title">预约检查</span>
			<view class="active1" v-for="(item_k,i) in yuyueList" :key="item_k.id">
				<view class="active1-top active1-top-1">
					<view class="active1-title">
						<image src="@/static/icon/peizhen6.png" mode="widthFix"></image>
						<span>{{item_k.administrativeName}}</span>
					</view>
					<view class="active1-msg">
						<image src="@/static/icon/peizhen8.png" mode="widthFix"></image>
						<view class="active1-right">
							<span class="text-1">{{item_k.hospitalName}}</span>
							<span class="text-2">检查时间：<span class="text-1">{{item_k.expectClinicTime}}</span></span>
							<span class="text-2">检查人员：<span class="text-1">{{item_k.clinicUserName}}</span></span>
							<span class="text-2">预约科室：<span class="text-1">{{item_k.administrativeName}}</span></span>
						</view>
					</view>
				</view>
				<view class="active1-more">
					<span>查看更多</span>
					<u-icon name="arrow-right-double" color="rgba(51,51,51,0.5)" size="14"></u-icon>
				</view>
			</view>
		</view>
		<view class="activeName1" v-show="activeName==2">
			<view class="chating">
				<view class="chating-tips">
					<image src="@/static/icon/chat1.png" mode="scaleToFill"></image>
					<view class="chating-nums">
						你有一个新的诊疗结果
					</view>
				</view>
				<view class="chating-msg chating-1">
					<image src="@/static/icon/result.png" mode="scaleToFill"></image>
					<view class="chating-s">
						<span>体检报告书</span>
						<span class="chating-time">09:23</span>
					</view>
				</view>
			</view>
		</view>
		<tabbar :routePath="'/pages/assist/assist'" :typeBar="1" />
	</view>
</template>

<script>
	import {findAllDoctor,findAllSpecialist,findBhBookedByUser } from "@/common/api/index.js"
	export default {
		data() {
			return {
				activeName: 0,
				socketTast:null,
				timeCend:null,
				unreadNumber:0,
				tokenList:[],
				yuyueList:[],
				jiuzhengList:[],
				tabsType: [{
						name: '诊前咨询'
					},
					{
						name: '预约/陪诊'
					},
					{
						name: '办理结束'
					},
				],
			}
		},
		onShow() {
			this.getJiuzheng()
			this.getYuyue()
			this.getNowtokening()
		}, 
		onLoad() {
			let users =  uni.getStorageSync('doctorInfo')||null
			if(!users){
				uni.switchTab({
					url:"/pages/mine/mine"
				})
			}else{
				this.useInfo = JSON.parse(users)
				this.$store.dispatch('websocketInit',this.useInfo.id)
				this.socketTast = this.$store.state.socketTast
				this.socketTast.onMessage((res)=>{
						console.log(res)
						if(res){
						   this.timeCend =  setTimeout(()=>{
								this.getNowtokening()
							},1000)
						}
					})
			} 
		},
		methods: {
             navigatorTo(type){
				 uni.navigateTo({
				 	url:"/pages/diagnosis/diagnosis?type="+type
				 })
			 },
			//就诊
			async getJiuzheng(){
				let res = await findBhBookedByUser(0)
				// console.log(res)
				this.jiuzhengList = res.data
			},
			//预约
			async getYuyue(){
				let res = await findBhBookedByUser(1)
				// console.log(res)
				this.yuyueList = res.data
			},
			 //点击咨询
			async tochatAny(){
				let users = uni.getStorageInfoSync('doctorInfo')||null
				if(!users)return uni.showToast({
							  icon: 'none',
							  position: 'top',
							  title: '请先登录！'
							});
				 let res = await findAllSpecialist({
				 	pageNum: 1,
				 	pageSize: 1
				 })
				 let data = {
					 userId: res.data.rows[0].id,
					 nickName:res.data.rows[0].specialistName,
					 headImgUrl:res.data.rows[0].specialistHeadImgUrl
				 }
				 uni.navigateTo({
				 	url:`/pages/connectMsg/connectMsg?item=${encodeURIComponent(JSON.stringify(data))}`,
				 })
			 },
			 //前往聊天
			 toChat(item){
				 // console.log(item)
				uni.navigateTo({
					url:`/pages/connectMsg/connectMsg?item=${encodeURIComponent(JSON.stringify(item))}`
				}) 
			 },
			 //获取聊天
			 async getNowtokening(){
				 if(this.timeCend!=null){
					 clearTimeout(this.timeCend)
					 this.timeCend = null
				 }
				let res = await findAllDoctor()
				// console.log(res)
				if(res.data.length>0)this.unreadNumber = res.data[0].userUnreadNumber
				this.tokenList = res.data
			 }
		}
	}
</script>

<style lang="scss" scoped>
	.tabs-list {
		box-shadow: 0rpx 0rpx 10rpx 4rpx rgba(0, 0, 0, 0.06);
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	}

	.chating-msg {
		width: 100%;
		margin-top: 20rpx;
		display: flex;
		gap: 20rpx;
		height: 94rpx;
		position: relative;
		image {
			width: 94rpx;
			height: 100%;
			border-radius: 50%;
			overflow: hidden;
		}

		.chating-right {
			height: 100%;
			display: flex;
			width: calc(100% - 114rpx);
			flex-direction: column;
			justify-content: space-between;
			padding: 5rpx 0;
			align-items: flex-end;

			.chating-name {
				width: 100%;
				display: flex;
				justify-content: space-between;
				font-size: 34rpx;
				font-weight: 500;
				color: #333333;

				.chating-time {
					font-size: 24rpx;
					font-weight: 400;
					color: #8F8F8F;
				}
			}

			.chating-news {
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(51, 51, 51, 0.7);
			}
		}

	}

	.tabs-box {
		width: 100%;
		display: flex;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		background: linear-gradient(#EBEFF7 50%, #fff 100%);
		overflow: hidden;

		.tabs-item {
			flex: 1;
			text-align: center;
			background-color: #EBEFF7;
			padding: 30rpx 0;
			text-align: center;
			font-weight: 500;
			color: #080808;
		}

		.active-tab {
			background-color: #fff;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			position: relative;
		}

		.active-tab::after {
			content: "";
			width: 40rpx;
			height: 8rpx;
			background: #40D49F;
			box-shadow: 0rpx 0rpx 6rpx 0rpx #40D49F;
			border-radius: 4rpx;
			position: absolute;
			bottom: 0;
			left: calc(50% - 20rpx);
		}

		.active-right {
			border-radius: 0rpx 0rpx 20rpx 0rpx;
		}

		.active-left {
			border-radius: 0rpx 0rpx 0rpx 20rpx;
		}
	}

	.assit-contain {
		padding: 0 30rpx;
		padding-bottom: 180rpx;
		.tab-content {
			width: 100%;
			padding: 30rpx;
			background-color: #fff;
			border-radius: 0rpx 0rpx 20rpx 20rpx;

			.tab-1 {
				width: 100%;
				height: 216rpx;
				background: #EEF2FD;
				padding: 20rpx;
				border-radius: 14rpx;
				display: flex;
				align-items: flex-end;

				.connect-img {
					width: 164rpx;
					height: 170rpx;
				}

				.left-tab1 {
					flex: 1;
					height: 100%;
					display: flex;
					justify-content: space-between;
					flex-direction: column;

					.user-tab {
						font-weight: 500;
						color: #080808;
						line-height: 42rpx;
					}

					.text-tab {
						font-size: 28rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #575757;
						line-height: 28rpx;
					}

					.bth-tab {
						width: 246rpx;
						height: 60rpx;
						background: #FFFFFF;
						box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.06);
						border-radius: 30rpx;
						font-size: 30rpx;
						font-weight: bold;
						color: #080808;
						line-height: 60rpx;
						margin-left: 0;
						display: flex;
						align-items: center;
						gap: 20rpx;

						image {
							width: 40rpx;
							height: 40rpx;
						}
					}
				}

			}

			.tab-2 {
				width: 100%;
				display: flex;
				justify-content: space-between;

				.tabitem {
					width: 300rpx;
					height: 216rpx;
					border-radius: 16rpx;
					padding: 20rpx;
					display: flex;
					align-items: flex-end;

					.name-tip {
						flex: 1;
						height: 100%;
						display: flex;
						flex-direction: column;
						gap: 10rpx;

						.name1 {
							font-size: 34rpx;
							font-weight: 500;
							color: #080808;
						}

						.name2 {
							font-size: 28rpx;
							font-weight: 500;
							color: rgba(51, 51, 51, 0.7);
						}
					}

					.log-peizhen {
						width: 80rpx;
						height: 80rpx;
					}
				}

				.bgimg1 {
					background-image: url('@/static/icon/peizhen1.png');
					background-size: 100% 100%;
				}

				.bgimg2 {
					background-image: url('@/static/icon/peizhen2.png');
					background-size: 100% 100%;
				}
			}
		}

		.activeName1 {
			width: 100%;
			display: flex;
			flex-direction: column;
			gap: 25rpx;

			.chating {
				width: 100%;
				box-shadow: 0rpx 0rpx 10rpx 4rpx rgba(0, 0, 0, 0.06);
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 30rpx;

				.chating-tips {
					height: 58rpx;
					background: rgba(2, 195, 156, .08);
					border-radius: 34rpx;
					display: flex;
					align-items: center;
					padding: 0 20rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #575757;
					gap: 10rpx;

					image {
						width: 37rpx;
						height: 34rpx;
					}

					.chating-nums {
						.chating-num {
							color: #FF3A3B;
						}
					}
				}
			}

			.chating-1 {
				align-items: center;

				.chating-s {
					flex: 1;
					display: flex;
					justify-content: space-between;

					.chating-time {
						font-size: 24rpx;
						font-weight: 400;
						color: #8F8F8F;
					}
				}
			}

			.chatlist {
				width: 100%;
				box-shadow: 0rpx 0rpx 10rpx 4rpx rgba(0, 0, 0, 0.06);
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 30rpx;
				.chatlist-more{
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					.more-title{
						flex: 1;
					}
					.more-right{
						display: flex;
						justify-content: right;
						font-size: 22rpx;
						font-weight: 400;
						color: rgba(51,51,51,0.5);
					}
				}
				.chating-msg{
					border-bottom: 1px solid #E8E8E8;
					height: 124rpx;
					padding-bottom: 30rpx;
				}
				.chating-noborder{
					border-bottom: none;
					height: 94rpx;
					padding-bottom: 0rpx;
				}
			}
		}

		.activeName2 {
			width: 100%;
			display: flex;
			flex-direction: column;
			gap: 30rpx;

			.activeName-title {
				font-size: 32rpx;
				font-weight: 500;
				color: #333333;
			}

			.active1 {
				box-shadow: 0rpx 0rpx 10rpx 4rpx rgba(0, 0, 0, 0.06);
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 30rpx;
				display: flex;
				flex-direction: column;
				gap: 20rpx;

				.active1-top {
					width: 100%;
					padding: 30rpx;
					display: flex;
					flex-direction: column;
					gap: 20rpx;
					background-color: #EAF1FE;
					justify-content: space-between;

					.active1-title {
						width: 100%;
						display: flex;
						align-items: center;
						height: 58rpx;
						gap: 20rpx;
						color: #4C8BF7;
						font-size: 28rpx;

						image {
							width: 58rpx;
							height: 58rpx;
						}
					}

					.active1-msg {
						width: 100%;
						display: flex;
						gap: 20rpx;
						height: 160rpx;

						image {
							width: 160rpx;
							height: 160rpx;
							border-radius: 20rpx;
							overflow: hidden;
						}

						.active1-right {
							flex: 1;
							display: flex;
							flex-direction: column;
							height: 100%;
							gap: 10rpx;

							// justify-content: space-between;
							.text-1 {
								font-size: 26rpx;
								font-weight: 500;
								color: #333333;
							}

							.text-2 {
								font-size: 24rpx;
								font-weight: 400;
								color: #545B60;
							}
						}
					}
				}

				.active1-top-1 {
					background-color: #E8FAF4;

					.active1-title {
						color: #12927C;
					}
				}

				.active1-more {
					color: rgba(51, 51, 51, 0.5);
					font-size: 22rpx;
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					gap: 10rpx;
				}
			}

		}

	}
</style>